<script setup lang="tsx">
import {Button, Popconfirm} from 'ant-design-vue';
import {onMounted, ref} from 'vue';
import {useTable, useTableOperate, useTableScroll} from '@/hooks/common/table';
import {$t} from '@/locales';
import {collectionDeleteApi, getCollectionListApi, getTopicListApi} from '@/service/api/businessApi';
import {useProjectStore} from '@/store/modules/project';
import UserOperateDrawer from './modules/operate-drawer.vue';
import UserSearch from './modules/search.vue';

const projectStore = useProjectStore();
const {tableWrapperRef, scrollConfig} = useTableScroll();

const {
    columns,
    columnChecks,
    data,
    getData,
    getDataByPage,
    loading,
    mobilePagination,
    searchParams,
    resetSearchParams
} = useTable({
    apiFn: getCollectionListApi,
    apiParams: {
        pageNo: 1,
        pageSize: 10,
        projectId: projectStore.currentProject?.id
    },
    columns: (): any => [
        {
            key: 'collectionNo',
            dataIndex: 'collectionNo',
            title: '网关编码',
            width: 160
        },
        {
            key: 'collectionName',
            dataIndex: 'collectionName',
            title: '网关名称',
            width: 160
        },
        {
            key: 'topicCode',
            dataIndex: 'topicCode',
            title: '订阅主题',
            width: 160,
            customRender: ({record}: any) => (
                <div>
                    {getTopicName(record.topicCode)}
                </div>
            )
        },
        {
            key: 'remark',
            dataIndex: 'remark',
            title: '备注',
            width: 160
        },
        {
            title: '创建时间',
            dataIndex: 'gmtCreated',
            key: 'gmtCreated',
            width: 100
        },
        {
            title: '更新时间',
            dataIndex: 'gmtModified',
            key: 'gmtModified',
            width: 100
        },
        {
            key: 'operate',
            title: $t('common.operate'),
            align: 'center',
            width: 140,
            customRender: ({record}: any) => (
                <div class="flex-center gap-8px">
                    <Button type="primary" ghost size="small" onClick={() => edit(record.id)}>
                        编辑
                    </Button>
                    <Popconfirm title="确认删除吗？" onConfirm={() => handleDelete(record.id)}>
                        <Button danger size="small">
                            删除
                        </Button>
                    </Popconfirm>
                </div>
            )
        }
    ]
});

const {drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onDeleted} = useTableOperate(
    data as any,
    getData
);

const getTopicName = (code: any) => {
    if(!code) return code;
    const topic = TopicData.value.find((item: any) => item.topicCode === code);
    if (topic) {
        return topic.topicType;
    }
    return code;
}

async function handleDelete(id: any) {
    const res = await collectionDeleteApi(id);
    if (res.error === null) await onDeleted();
}

function edit(id: number) {
    handleEdit(id);
}

const TopicData = ref([])
const getTopicList = () => {
    getTopicListApi({
        pageNo: 1,
        pageSize: 1000
    }).then(res => {
        if (res.data) {
            TopicData.value = res.data.data;
        }
    });
};

onMounted(() => {
    getTopicList();
});
</script>

<template>
    <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
        <UserSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage"/>
        <ACard
            title="网关列表"
            :bordered="false"
            :body-style="{ flex: 1, overflow: 'hidden' }"
            class="flex-col-stretch sm:flex-1-hidden card-wrapper"
        >
            <template #extra>
                <TableHeaderOperation
                    v-model:columns="columnChecks"
                    :disabled-delete="checkedRowKeys.length === 0"
                    :loading="loading"
                    @add="handleAdd"
                    @refresh="getData"
                />
            </template>
            <ATable
                ref="tableWrapperRef"
                :columns="columns"
                :data-source="data"
                size="small"
                :scroll="scrollConfig"
                :loading="loading"
                row-key="id"
                :pagination="mobilePagination"
                class="h-full"
                children-column-name="childDeviceInfo"
            />

            <UserOperateDrawer
                v-model:visible="drawerVisible"
                v-model:TopicData="TopicData"
                :operate-type="operateType"
                :row-data="editingData"
                @submitted="getData"
            />
        </ACard>
    </div>
</template>

<style scoped></style>
